<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="../../css/person/safety/safety.css">

    <link rel="stylesheet" href="../../css/person/safety/jquery.steps.css">

</head>

<body>
    <!--导航-->
    <div class="container-fluid">
        <div class="wrapper wrapper-content animated fadeInRight">
            <!-- 使页面铺满整个屏幕 -->
            <div class="row">
                <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-brand" style="margin-left:10px">
                            <img src="img" href="#"></a>
                        </div>
                        <div class="navbar-brand" style="margin-left:10px">
                            <form class="form-horizontal" role="form">
                                <div class="form-group has-feedback">
                                    <div class="modal-md">
                                        <span class="glyphicon glyphicon-search form-control-feedback"></span>
                                        <input id="search" type="text" class="form-control input-lg"
                                            placeholder="搜'柴犬'试试">
                                    </div>
                                </div>
                            </form>
                        </div>

                        <ul class="nav navbar-nav navbar-right">
                            <li class="pure-menu-selected"><a href="../index.html" class="mynav-underline-active"><b>首页</b></a></li>
                            <li><a href="#" class="nav-underline"><b>论坛</b></a></li>
                            <li><a href="#" class="nav-underline"><b>宠物动态</b></a></li>
                            <li><a href="#" class="nav-underline"><b>二手市场</b></a></li>
                            <li><a href="#" class="nav-underline"><b>趣味专区</b></a></li>
                            <li><a href="#" class="nav-underline"><b>消息中心</b></a></li>
                            <li><a href="person.html"nav-underline"><b>我的</b></a></li>

                        </ul>
                    </div>
                </nav>

            </div>
        </div>


        <!-- 主体部分 -->
        <div class="container" style="width: 1015px;margin-top: 50px">
            <div class="col-sm-12" style="background: white;">
                <div class="zt">
                    <p class="info" id="safety1">修改密码</p>
                    <p id="safety2">绑定手机邮箱</p>
                    <p id="safety3">实名认证</p>
                </div>

                <div id="block2">
                    <div class="ibox">
                        <div class="ibox-content">
                            <p>
                                &nbsp;
                            </p>
                            <form id="form" action="form_wizard.html#" class="wizard-big">
                                <h1>确认账户信息</h1>
                                <fieldset>
                                    <h2>账户信息</h2>
                                    <div class="row">
                                        <div class="col-sm-8">
                                            <div class="form-group">
                                                <label>用户名 *</label>
                                                <input id="userName" name="userName" type="text"
                                                    class="form-control required">
                                            </div>
                                            <div class="form-group">
                                                <label>密码 *</label>
                                                <input id="password" name="password" type="text"
                                                    class="form-control required">
                                            </div>
                                            <div class="form-group">
                                                <label>确认密码 *</label>
                                                <input id="confirm" name="confirm" type="text"
                                                    class="form-control required">
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="text-center">
                                                <div style="margin-top: 20px">
                                                    <i class="fa fa-sign-in"
                                                        style="font-size: 180px;color: #e5e5e5 "></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </fieldset>
                                <h1>绑定手机</h1>
                                <fieldset>
                                    <h2>绑定手机号</h2>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>电话号码 *</label>
                                                <input id="name" name="name" type="text" class="form-control required">
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>

                                <h1>绑定邮箱</h1>
                                <fieldset>
                                    <!-- <div class="text-center" style="margin-top: 120px"> -->
                                    <h2>邮箱绑定</h2>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>Email *</label>
                                                <input id="email" name="email" type="text"
                                                    class="form-control required email">
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>

                                <h1>完成</h1>
                                <fieldset>
                                    <h2>绑定成功</h2>
                                    <!-- <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> -->
                                    <label for="acceptTerms"></label>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>


                <div id="block1" style="display: none">
                    <div class="ibox">
                        <div class="ibox-content">
                            <p>
                                &nbsp;
                            </p>
                            <form id="form1" action="form_wizard.html#" class="wizard-big">
                                <h1>修改密码</h1>
                                <fieldset>
                                    <h2>账户信息</h2>
                                    <div class="row">
                                        <div class="col-sm-8">
                                            <div class="form-group">
                                                <label>用户名 *</label>
                                                <input id="euserName" name="userName" type="text"
                                                    class="form-control required">
                                            </div>
                                            <div class="form-group">
                                                <label>密码 *</label>
                                                <input id="epassword" name="password" type="text"
                                                    class="form-control required">
                                            </div>
                                            <div class="form-group">
                                                <label>确认密码 *</label>
                                                <input id="econfirm" name="confirm" type="text"
                                                    class="form-control required">
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="text-center">
                                                <div style="margin-top: 20px">
                                                    <i class="fa fa-sign-in"
                                                        style="font-size: 180px;color: #e5e5e5 "></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>






                <!-- 实名认证 -->
                <div id="block3" style="display: none">
                    <div class="ibox">
                        <div class="ibox-content">
                            <p>
                                &nbsp;
                            </p>

                            <form id="form3" action="form_wizard.html#" class="wizard-big">
                                <h1>验证账户信息</h1>
                                <fieldset>
                                    <h2>账户信息</h2>
                                    <div class="row">
                                        <div class="col-sm-8">
                                            <div class="form-group">
                                                <label>用户名 *</label>
                                                <input id="suserName" name="userName" type="text"
                                                    class="form-control required">
                                            </div>
                                            <div class="form-group">
                                                <label>密码 *</label>
                                                <input id="spassword" name="password" type="text"
                                                    class="form-control required">
                                            </div>
                                            <div class="form-group">
                                                <label>确认密码 *</label>
                                                <input id="sconfirm" name="confirm" type="text"
                                                    class="form-control required">
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="text-center">
                                                <div style="margin-top: 20px">
                                                    <i class="fa fa-sign-in"
                                                        style="font-size: 180px;color: #e5e5e5 "></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </fieldset>
                                <h1>实名认证</h1>
                                <fieldset>
                                    <h2>个人信息</h2>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>姓名 *</label>
                                                <input id="name" name="name" type="text" class="form-control required">
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <!-- !!!验证问题 -->
                                                <label>身份证号 *</label>
                                                <input id="card" name="card" type="text"
                                                    class="form-control required card">
                                            </div>
                                            <div class="form-group">
                                                <label>地址 *</label>
                                                <input id="address" name="address" type="text" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>

                                <h1>完成</h1>
                                <fieldset>
                                    <h2>条款</h2>
                                    <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required">
                                    <label for="acceptTerms">我同意注册条款</label><br>
                                    <h3>恭喜您,完成实名认证</h3>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>




            </div>
        </div>

        <script src="../../plugins/jquery/jquery.min.js"></script>
        <script src="../../plugins/bootstrap/js/bootstrap.min.js"></script>
        <script src="../../js/person/safety/jquery.steps.min.js"></script>
        <script src="../../js/person/safety/jquery.validate.min.js"></script>
        <script src="../../js/person/safety/messages_zh.min.js"></script>

        <script>
            $(document).ready(function () {
                $("#wizard").steps();
                // 模块2
                $("#form").steps({
                    bodyTag: "fieldset",
                    onStepChanging: function (event, currentIndex, newIndex) {
                        // Always allow going backward even if the current step contains invalid fields!
                        if (currentIndex > newIndex) {
                            return true;
                        }

                        // Forbid suppressing "Warning" step if the user is to young
                        if (newIndex === 3 && Number($("#age").val()) < 18) {
                            return false;
                        }

                        var form = $(this);

                        // Clean up if user went backward before
                        if (currentIndex < newIndex) {
                            // To remove error styles
                            $(".body:eq(" + newIndex + ") label.error", form).remove();
                            $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
                        }

                        // Disable validation on fields that are disabled or hidden.
                        form.validate().settings.ignore = ":disabled,:hidden";

                        // Start validation; Prevent going forward if false
                        return form.valid();
                    },
                    onStepChanged: function (event, currentIndex, priorIndex) {
                        // Suppress (skip) "Warning" step if the user is old enough.
                        if (currentIndex === 2 && Number($("#age").val()) >= 18) {
                            $(this).steps("next");
                        }

                        // Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
                        if (currentIndex === 2 && priorIndex === 3) {
                            $(this).steps("previous");
                        }
                    },
                    onFinishing: function (event, currentIndex) {
                        var form = $(this);

                        // Disable validation on fields that are disabled.
                        // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
                        form.validate().settings.ignore = ":disabled";

                        // Start validation; Prevent form submission if false
                        return form.valid();
                    },
                    onFinished: function (event, currentIndex) {
                        var form = $(this);

                        // Submit form input
                        form.submit();
                    }
                }).validate({
                    errorPlacement: function (error, element) {
                        element.before(error);
                    },
                    rules: {
                        confirm: {
                            equalTo: "#password"
                        }
                    }
                });

                //修改密码的
                // 模块一
                $("#form1").steps({
                    bodyTag: "fieldset",
                    onStepChanging: function (event, currentIndex, newIndex) {
                        if (currentIndex > newIndex) {
                            return true;
                        }
                        if (newIndex === 3 && Number($("#age").val()) < 18) {
                            return false;
                        }

                        var form = $(this);

                        if (currentIndex < newIndex) {

                            $(".body:eq(" + newIndex + ") label.error", form).remove();
                            $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
                        }


                        form.validate().settings.ignore = ":disabled,:hidden";


                        return form.valid();
                    },
                    onStepChanged: function (event, currentIndex, priorIndex) {

                        if (currentIndex === 2 && Number($("#age").val()) >= 18) {
                            $(this).steps("next");
                        }


                        if (currentIndex === 2 && priorIndex === 3) {
                            $(this).steps("previous");
                        }
                    },
                    onFinishing: function (event, currentIndex) {
                        var form = $(this);

                        form.validate().settings.ignore = ":disabled";

                        return form.valid();
                    },
                    onFinished: function (event, currentIndex) {
                        var form = $(this);

                        form.submit();
                    }
                }).validate({
                    errorPlacement: function (error, element) {
                        element.before(error);
                    },
                    rules: {
                        confirm: {
                            equalTo: "#epassword"
                        }
                    }
                });


                //模块三
                $("#form3").steps({
                    bodyTag: "fieldset",
                    onStepChanging: function (event, currentIndex, newIndex) {
                        if (currentIndex > newIndex) {
                            return true;
                        }
                        if (newIndex === 3 && Number($("#age").val()) < 18) {
                            return false;
                        }

                        var form = $(this);

                        if (currentIndex < newIndex) {

                            $(".body:eq(" + newIndex + ") label.error", form).remove();
                            $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
                        }


                        form.validate().settings.ignore = ":disabled,:hidden";


                        return form.valid();
                    },
                    onStepChanged: function (event, currentIndex, priorIndex) {

                        if (currentIndex === 2 && Number($("#age").val()) >= 18) {
                            $(this).steps("next");
                        }


                        if (currentIndex === 2 && priorIndex === 3) {
                            $(this).steps("previous");
                        }
                    },
                    onFinishing: function (event, currentIndex) {
                        var form = $(this);

                        form.validate().settings.ignore = ":disabled";

                        return form.valid();
                    },
                    onFinished: function (event, currentIndex) {
                        var form = $(this);

                        form.submit();
                    }
                }).validate({
                    errorPlacement: function (error, element) {
                        element.before(error);
                    },
                    rules: {
                        confirm: {
                            equalTo: "#spassword"
                        }
                    }
                });


                // 互相跳转

                $("#safety1").click(function () {
                    $("#safety1").addClass("info");
                    $("#safety2").removeClass("info");
                    $("#safety3").removeClass("info");
                    $("#block1").show();
                    $("#block2").hide();
                    $("#block3").hide();
                });

                $("#safety2").click(function () {
                    $("#safety2").addClass("info");
                    $("#safety1").removeClass("info");
                    $("#safety3").removeClass("info");
                    $("#block2").show();
                    $("#block1").hide();
                    $("#block3").hide();
                });

                $("#safety3").click(function () {
                    $("#safety3").addClass("info");
                    $("#safety1").removeClass("info");
                    $("#safety2").removeClass("info");
                    $("#block3").show();
                    $("#block2").hide();
                    $("#block1").hide();
                });





            });
        </script>


</body>

</html>